為什麼是 Solid.js? 原本我的公司也是使用 react ，但 react 的學習成本其實滿高的，這時候同事突然提說要不要來試試看Solid.js，那為什麼是它呢？

Solid.js 號稱擁有 JSX 語法，類似於 React hook 的語法。

先來看以下一段程式碼

import { createSignal, createEffect} from "solid-js";

export default function Hello() {
    const [count,setCount] = createSignal<number>(0);
		//count: setter, setCount: getter

		const increment = () => setCount(count() + 1);

		creatEffect(()=>{
			if(count === 5){
				console.log('數到5了')
			}
		}) //不需要再手動寫入要偵測變動的dependency

//如果是 react
		useEffect(() => {
	    setInterval(() => {
	      setCount(count + 1);
	    }, 1000);
	  }, []); //這邊未將count放入dependency，有些linting會提醒你

    return(
        <button onClick={increment}>click {count} time</button>
    )
}

Solid.js 性能直逼原生 js 是如何做到的呢？

1. Solid.js 不像 react 使用虛擬 DOM （virtual dom tree）diff，他直接使用瀏覽器的 DOM。
2. 響應式原理（觀察者模式），當 value 值改變時
   • createeffect 分析依賴還有回調，存入全局變量
   • read 的時候，如果有這個依賴對應的值，則放入 subscriptions。爲什麼這裏需要使用 {count()} 函數才能讀取值也是因爲這期間要處理一些事情。
   • write 的時候，去 subscriptions 裏面觸發對應的函數

👉 每個組件裏的 createEffect 裏面去收集對應的依賴， 在 set 改變值後，都會重新執行這些方法。看起來就像是實時更新了一樣。

3. 預編譯，將 jsx 部分的代碼，轉換成原生的語法。

我們最主要開始使用的原因是因為希望可以把 UI 跟邏輯拆開，因此導入solid.js與react共用試試看，目前想法是很多東西變得滿簡潔的，而且因為跟react很像所以上手也比較無感，接下來再來實作幾個小案例試試看吧！

參考文章：

• 又一個前端框架 Solid ？性能直逼原生 JS ？
• Solid.js 就是我理想中的 React